/* 放置一些公共样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 给整个页面加上背景图片 */
html,body {
    height: 100%;
}

body {
    background-image: url(../image/wallhaven-57v7k8.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.nav {
    width: 100%;
     /* 这些尺寸啥的就是自己设 */
     height: 50px;
     background-color: rgba(51, 51, 51, 0.4);
     color: white;

     /* 导航栏内部的内容,都是一行排列的,就需要使用 flex 布局来进行操作 */
     display: flex;
     /* 实现了元素垂直居中效果 */
     align-items: center;
}

.nav img {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    margin-left: 30px;
    margin-right: 10px;
}

.nav a{
    color: white;
    text-decoration: none;
    padding: 0 10px;
}


.nav .spacer {
    flex-grow: 1;
}
